<template>
  <div class="home-box">
    <!-- 首页分类列表 -->
    <div v-for="item in types" :key="item.typeId">
      <div class="list-name">
        <div class="title">{{ item.typeName }}</div>
        <router-link class="list-more" :to="{
            path:'/films',
            query:{
                typeId:item.typeId,
                typeName:item.typeName
            }
        }" tag="div">更多 > </router-link>
      </div>
      <div class="list-content">
        <!-- 电影展示组件 -->
        <div class="film-item" v-for="film in item.list" :key="film.filmId">
          <div class="film-img">
            <img :src="film.filmImg" alt="">
          </div>
          <div class="film-title">{{ film.filmName }}</div>
          <!-- 评分组件 -->
          <film-source :source="film.source"></film-source>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      types: [
        {
          typeId: "1001",
          typeName: "aaa",
        },
      ],
    };
  },
  mounted() {
    this.$api
      .loadTypes()
      .then((res) => {
        this.types = res;
      })
      .then(() => {
        for (const type of this.types) {
          this.$api
            .loadFilmsByParams({
              typeId: type.typeId,
            })
            .then((res) => {
              // console.log(res)
              this.$set(type, "list", res); // 为每个分类对象添加一个list属性，取值为当前分类下的电影
            });
        }
      });
  },
};
</script>

<style>
</style>